{% load i18n %}
<!DOCTYPE HTML>
<html>
<head>
    <title>TradingView Charting Library demo</title>

    <!-- Fix for iOS Safari zooming bug -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!-- jQuery is not required to use Charting Library. It is used only for sample datafeed ajax requests. -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><\/script>')</script>
    <script type="text/javascript" src="/static/charting_library/charting_library.min.js"></script>
    <script type="text/javascript" src="/static/charting_library/datafeed/udf/datafeed.js"></script>

    <script type="text/javascript">
        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                    results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        TradingView.onready(function()
        {
            var  symbol =  getParameterByName('symbol')|| "btc_bitcny"
            var  s =window.location.pathname
            s = s.substr(0, s.length - 1);
            var datafeed_url = s
            var widget = window.tvWidget = new TradingView.widget({
                fullscreen: true,
                symbol: symbol,
                interval: '1',
                container_id: "tv_chart_container",
                // BEWARE: no trailing slash is expected in feed URL
                datafeed: new Datafeeds.UDFCompatibleDatafeed(datafeed_url),
                library_path: "/static/charting_library/",
                custom_css_url: "day.css",
                locale: getParameterByName('lang') || "zh",
                timezone: 'Asia/Hong_Kong',

                // Regression Trend-related functionality is not implemented yet, so it's hidden for a while
                drawings_access: { type: 'black', tools: [ { name: "Regression Trend" } ] },
                disabled_features: ["left_toolbar",  "header_saveload", "compare_symbol", "display_market_status", "go_to_date", "header_chart_type","header_resolutions", "header_compare", "header_interval_dialog_button", "header_screenshot", "header_symbol_search", "header_undo_redo", "legend_context_menu", "show_hide_button_in_legend", "show_interval_dialog_on_key_press", "snapshot_trading_drawings", "symbol_info", "timeframes_toolbar", "use_localstorage_for_settings", "volume_force_overlay"],
                enabled_features: ["dont_show_boolean_study_arguments", "hide_last_na_study_output",  "same_data_requery", "side_toolbar_in_fullscreen_mode"],
                charts_storage_url: 'http://saveload.tradingview.com',
                charts_storage_api_version: "1.1",
                client_id: 'tradingview.com',
                user_id: 'public_user_id',
                overrides:overrides(),
            });
            widget.MAStudies = [];
            widget.selectedIntervalButton = null;
            widget.onChartReady(function () {
                var chart = widget.chart();

                var mas = [{
                    day: 5,
                    color: "#53B987"
                }, {
                    day: 10,
                    color: "#EB4D5C"
                },
                //{
                //    day: 30,
                //    color: "#397d51"
                //},
                //{
                //    day: 60,
                //    color: "#60407f"
                //}
                ];

                var buttons = [{
                    label: "{% trans '分时' %}",
                    resolution: "1",
                    chartType: 2
                }, {
                    label: "1{% trans '分' %}",
                    resolution: "1"
                }, {
                    label: "5{% trans '分' %}",
                    resolution: "5"
                }, {
                    label: "15{% trans '分' %}",
                    resolution: "15"
                },{
                    label: "30{% trans '分' %}",
                    resolution: "30"
                }, {
                    label: "1{% trans '小时' %}",
                    resolution: "60"
                }, {
                    label: "4{% trans '小时' %}",
                    resolution: "240"
                },{
                    label: "1{% trans '日' %}",
                    resolution: "1D"
                }];
                mas.forEach(item => {
                    chart.createStudy("Moving Average", false, false, [item.day], entity => {
                    widget.MAStudies.push(entity);
            }, {"plot.color": item.color});
            });
                chart.onIntervalChanged().subscribe(null, function (interval, obj) {
                    widget.changingInterval = false;
                    //console.log(chart.resolution());
                });
                buttons.forEach((item, index) => {
                    var button = widget.createButton();
                //console.log(chart.resolution());
                //item.resolution === widget.options.interval && updateSelectedIntervalButton(button);
                item.resolution === chart.resolution() && updateSelectedIntervalButton(button);
                button.attr("data-resolution", item.resolution)
                    .attr("data-chart-type", item.chartType === undefined ? 1 : item.chartType)
                    .html("<span>"+ item.label +"</span>")
                    .on("click", function() {
                        if (!widget.changingInterval && !button.hasClass("selected")) {
                            var chartType = +button.attr("data-chart-type");
                            var resolution = button.attr("data-resolution");

                            if (chart.resolution() !== resolution) {
                                widget.changingInterval = true;
                                chart.setResolution(resolution);
                            }
                            if (chart.chartType() !== chartType) {
                                chart.setChartType(chartType);
//											widget.applyOverrides({
//												"mainSeriesProperties.style": chartType
//											});
                            }
                            updateSelectedIntervalButton(button);
                            showMAStudies(chartType);
                        }
                    })
            });

                function updateSelectedIntervalButton(button) {
                    widget.selectedIntervalButton && widget.selectedIntervalButton.removeClass("selected");
                    button.addClass("selected");
                    widget.selectedIntervalButton = button;
                }

                function showMAStudies(chartType) {
                    var i=0;
                    var visible=true;
                    widget.MAStudies.forEach(item => {
                        if(chartType==2){
                        if(i==0){
                            visible=true;
                        }else{
                            visible=false;
                        }
                        i++;
                    }
                    chart.setEntityVisibility(item, visible);

                    })
                }
            });
        });

        function  overrides() {
            var style = {
                up: "#53B987",
                down: "#EB4D5C",
                bg: "#1d1d29",
                grid: "#1f2943",
                cross: "#9194A3",
                border: "#4e5b85",
                text: "gray",
                areatop: "rgba(122, 152, 247, .1)",
                areadown: "rgba(122, 152, 247, .02)"
            };

            return {
                //volumePaneSize: "medium",
                volumePaneSize: "small",
                //"scalesProperties.lineColor": style.text,
                //"scalesProperties.textColor": style.text,
                //"paneProperties.background": style.bg,
                //"paneProperties.vertGridProperties.color": style.grid,
                //"paneProperties.horzGridProperties.color": style.grid,
                //"paneProperties.crossHairProperties.color": style.cross,
                "paneProperties.legendProperties.showLegend": !!style.showLegend,
                "paneProperties.legendProperties.showStudyArguments": true,
                "paneProperties.legendProperties.showStudyTitles": true,
                "paneProperties.legendProperties.showStudyValues": true,
                "paneProperties.legendProperties.showSeriesTitle": true,
                "paneProperties.legendProperties.showSeriesOHLC": true,
                "mainSeriesProperties.candleStyle.upColor": style.up,
                "mainSeriesProperties.candleStyle.downColor": style.down,
                "mainSeriesProperties.candleStyle.drawWick": true,
                "mainSeriesProperties.candleStyle.drawBorder": true,
                "mainSeriesProperties.candleStyle.borderColor": style.border,
                "mainSeriesProperties.candleStyle.borderUpColor": style.up,
                "mainSeriesProperties.candleStyle.borderDownColor": style.down,
                "mainSeriesProperties.candleStyle.wickUpColor": style.up,
                "mainSeriesProperties.candleStyle.wickDownColor": style.down,
                "mainSeriesProperties.candleStyle.barColorsOnPrevClose": false,
                "mainSeriesProperties.hollowCandleStyle.upColor": style.up,
                "mainSeriesProperties.hollowCandleStyle.downColor": style.down,
                "mainSeriesProperties.hollowCandleStyle.drawWick": true,
                "mainSeriesProperties.hollowCandleStyle.drawBorder": true,
                "mainSeriesProperties.hollowCandleStyle.borderColor": style.border,
                "mainSeriesProperties.hollowCandleStyle.borderUpColor": style.up,
                "mainSeriesProperties.hollowCandleStyle.borderDownColor": style.down,
                "mainSeriesProperties.hollowCandleStyle.wickColor": style.line,
                "mainSeriesProperties.haStyle.upColor": style.up,
                "mainSeriesProperties.haStyle.downColor": style.down,
                "mainSeriesProperties.haStyle.drawWick": true,
                "mainSeriesProperties.haStyle.drawBorder": true,
                "mainSeriesProperties.haStyle.borderColor": style.border,
                "mainSeriesProperties.haStyle.borderUpColor": style.up,
                "mainSeriesProperties.haStyle.borderDownColor": style.down,
                "mainSeriesProperties.haStyle.wickColor": style.border,
                "mainSeriesProperties.haStyle.barColorsOnPrevClose": false,
                "mainSeriesProperties.barStyle.upColor": style.up,
                "mainSeriesProperties.barStyle.downColor": style.down,
                "mainSeriesProperties.barStyle.barColorsOnPrevClose": false,
                "mainSeriesProperties.barStyle.dontDrawOpen": false,
                "mainSeriesProperties.lineStyle.color": style.border,
                "mainSeriesProperties.lineStyle.linewidth": 1,
                "mainSeriesProperties.lineStyle.priceSource": "close",
                "mainSeriesProperties.areaStyle.color1": style.areatop,
                "mainSeriesProperties.areaStyle.color2": style.areadown,
                "mainSeriesProperties.areaStyle.linecolor": style.border,
                "mainSeriesProperties.areaStyle.linewidth": 1,
                "mainSeriesProperties.areaStyle.priceSource": "close",


        //            "paneProperties.background": "#222222",
        //            "paneProperties.vertGridProperties.color": "#454545",
        //            "paneProperties.horzGridProperties.color": "#454545",
        //            "symbolWatermarkProperties.transparency": 90,
        //            "scalesProperties.textColor" : "#AAA"

            };
        }
    </script>
</head>

<body style="margin:0px;">
<div id="tv_chart_container"></div>
</body>
</html>
